<template>
	<!-- 项目详情 -->
	<div class="">
		<div class="title">
			<svg-icon icon-class="investment-icon-home" class="status-icon" />
			<span class="m-l5">{{partnerName===null?'暂无':partnerName===''?'暂无':partnerName==='null'?'暂无':partnerName}}</span>
		</div>
		<el-tabs
			v-model="activeName"
			class="demo-tabs m-t20"
			@tab-click="handleClick"
			v-loading="isLoading"
			element-loading-text="数据加载中..."
		>
			<el-tab-pane label="基础信息" name="1">
				<basic-information ref="basicInformationRef"/>
			</el-tab-pane>
			<el-tab-pane label="项目节点" name="2">
				<project-node ref="projectNodeRef"/>
			</el-tab-pane>
			<el-tab-pane label="投资方案" name="3">
				<investment-plan ref="investmentPlanRef"/>
			</el-tab-pane>
			<el-tab-pane label="立项信息" name="4">
				<project-approval-information ref="projectApprovalInformationRef"/>
			</el-tab-pane>
			<el-tab-pane label="投资计划" name="5">
				<investment-scheme ref="investmentSchemeRef"/>
			</el-tab-pane>
			<el-tab-pane label="时间轴" name="6">
				<time-axis ref="timeAxisRef"/>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import {ref, reactive, onMounted, nextTick} from "vue";
import {
	ElForm,
	ElTabs,
} from "element-plus";
import {useRouter} from "vue-router";
import BasicInformation from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/programmeManagement/components/basicInformation";
import ProjectNode from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/programmeManagement/components/projectNode.vue"
import InvestmentPlan from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/programmeManagement/components/investmentPlan.vue"
import ProjectApprovalInformation from "@/views/investmentProjectManagement/preparatoryProject/reserveInvestmentProjectLibrary/programmeManagement/components/projectApprovalInformation.vue"
import InvestmentScheme from "@/views/investmentProjectManagement/investmentProjects/investmentProjectInformation/detailsComponents/InvestmentPlan.vue";
import TimeAxis from "./components/timeAxis";

const router = useRouter();
const projectId = router.currentRoute.value.params.projectId;
const partnerName = router.currentRoute.value.params.partnerName;

const state = reactive({
	formData: {},
	stageList: [],
});
const activeName = ref("1");
const isLoading = ref(false);

/**
 * el-tabs被点击
 * @param data
 */
const basicInformationRef = ref(null);
const projectNodeRef = ref(null);
const investmentPlanRef = ref(null);
const projectApprovalInformationRef = ref(null);
const investmentSchemeRef = ref(null);
const timeAxisRef = ref(null);
const handleClick = (e) => {
	isLoading.value = true;
	switch (e.index) {
		case '0':
			basicInformationRef.value.getData(()=>{isLoading.value = false;});
			break;
		case '1':
			projectNodeRef.value._init(()=>{isLoading.value = false;});
			break;
		case '2':
			investmentPlanRef.value.getData({pageNum:1,pageSize:10,param:{projectId:projectId}},()=>{isLoading.value = false;});
			break;
		case '3':
			projectApprovalInformationRef.value.getData({pageNum:1,pageSize:10,param:{projectId:projectId}},()=>{isLoading.value = false;});
			break;
		case '4':
			investmentSchemeRef.value.getData(()=>{isLoading.value = false;});
			break;
		case '5':
			timeAxisRef.value.getData(()=>{isLoading.value = false;});
			break;
	}
};

onMounted(()=>{
	nextTick(()=>{
		isLoading.value = true;
		basicInformationRef.value.getData(()=>{isLoading.value = false;});
	});
});
</script>


<style lang="scss" scoped>
.title {
	height: 18px;
	font-size: 18px;
	font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	font-weight: 700;
	color: #000000;
}
.el-form-item,
.el-select {
	width: 100%;
}

.project_jd {
	min-height: 200px;
	width: 100%;
	margin-bottom: 30px;
	display: flex;
	// flex-wrap: wrap;
	align-items: center;
	overflow-x: auto;
	padding-bottom: 20px;
	.project_item {
		// background-color: #999;
		padding: 10px;
		.jd_info {
			margin-top: 30px;
			width: 134px;
			line-height: 32px;
			color: #fff;
			text-align: center;
			margin-left: 30px;
			height: 32px;
			background: #d4ae85;
			border-radius: 16px;
		}
		.jd_time {
			margin-top: 20px;
			margin-left: 30px;
		}
	}
}
.shu {
	position: relative;
	.dividing {
		position: absolute;
		top: 50%;
		left: 0px;
		width: 2px;
		height: 50%;
		background-color: #fc7018;
		transform: translateY(-48%);
	}
}
</style>
